<template>
  <div>
    <Popup :show="true" >
      <!-- 登录外围框 -->
      <div v-show="loginshow"
           class="login-form">
        <!-- 提示框 -->
        <div class="Fraud_tis">
          <img src="https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png"
               alt=""
               class="small_icom">
          <p class="small_tis_p">本网不会以任何理由要求您转账汇款，谨防诈骗。</p>
        </div>
        <!-- 标题 -->
        <div class="title_div">
          <div class="login-title ">
            <span @click="LoginTiBtn()"
                  :class="{'active':loginshow}">登录区</span>
            <!-- <a href="">登录区</a> -->
          </div>
          <div class="Aeg-title ">
            <span @click="AegTiBtn()"
                  :class="{'active':!loginshow}">注册区</span>

          </div>
        </div>
        <!-- 中间空白层 -->
        <div class="msg-wrap">
          <div class="tis_icom"></div>
          <p>请正确输入账户名和密码</p>
        </div>
        <!-- 账号框 -->
        <div class="login_input_div">
          <div class="icom_div"></div>
          <input type="text"
                 class="login_acc_input"
                 placeholder="用户名">
        </div>
        <!-- 密码框 -->
        <div class="login_input_div2">
          <div class="icom_div2"></div>
          <input type="password"
                 class="login_pwd_input"
                 placeholder="密码">
        </div>
        <Button type="error"
                class="loginBtn">登录</Button>
        <div class="foot_div">
          <div class="QQ_icom"></div>
          <span class="QQ_font">QQ</span>
          <div class="Wx_icom"></div>
          <span class="Wx_font">微信</span>
          <div class="RegisterNow_icom"></div>
          <span class="RegisterNow_font"
                @click="AegTiBtn()">立即注册</span>
        </div>
      </div>
      <!-- 注册区 区 -------------------------------------------------------- -->
      <div v-show="Aegshow"
           class="Aeg-form">
        <!-- 提示框 -->
        <div class="Fraud_tis">
          <img src="https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/icon-tips.png"
               alt=""
               class="small_icom">
          <p class="small_tis_p">本网不会以任何理由要求您转账汇款，谨防诈骗。</p>
        </div>
        <!-- 标题 -->
        <div class="title_div">
          <div class="login-title ">
            <span @click="LoginTiBtn()"
                  :class="{'active2':  !Aegshow}">登录区</span>
          </div>
          <div class="Aeg-title ">
            <span @click="AegTiBtn()"
                  :class="{'active2':  Aegshow}">注册区</span>
            <!-- <a href="">注册区</a> -->
          </div>
        </div>
        <!-- 中间空白层 -->
        <div class="msg-wrap">
          <div class="tis_icom"></div>
          <p>请正确输入输入框内容</p>
        </div>
        <!-- 账号框 -->
        <div class="Aeg_input_div">
          <div class="icom_div"></div>
          <input type="text"
                 class="Aeg_acc_input"
                 placeholder="用户名">
        </div>
        <!-- 密码框 -->
        <div class="Aeg_input_div2">
          <div class="icom_div2"></div>
          <input type="password"
                 class="Aeg_pwd_input"
                 placeholder="密码">
        </div>
        <!-- 确认密码框 -->
        <div class="Aeg_input_div3">
          <div class="icom_div2"></div>
          <input type="password"
                 class="Aeg_pwd_input2"
                 placeholder="确认密码">
        </div>
        <!-- 手机号码框 -->
        <div class="Aeg_input_div4">
          <div class="icom_div2"></div>
          <input type="text"
                 class="Aeg_phone_input"
                 placeholder="手机号">
        </div>
        <!-- 验证码区 -->
        <div class="Aeg_input_div5">
          <div class="icom_div2"></div>
          <input type="text"
                 class="Aeg_Code_input"
                 placeholder="验证码">
        </div>
        <div class="Code_Box"
             @click="CodeBox()">点击此处验证码</div>
        <!-- 验证码提示区 -->
        <div class="Aeg-Code-msg-wrap">
          <div class="Aeg_Code_tis_icom"></div>
          <p>输入的验证码内容有误</p>
        </div>
        <!-- 注册按钮 -->
        <Button type="error"
                class="AegBtn">注册</Button>
        <div class="foot_div">
          <div class="QQ_icom"></div>
          <span class="QQ_font">QQ</span>
          <div class="Wx_icom"></div>
          <span class="Wx_font">微信</span>
          <div class="RegisterNow_icom"></div>
          <span class="LoginisterNow_font"
                @click="LoginTiBtn()">立即登录</span>
        </div>
      </div>

    </Popup>

  </div>

</template>
<script>
import Popup from 'components/common/popup/Popup'

export default {
  data() {
    return {
      loginshow: true,
      Aegshow: false
    }
  },
  methods: {
    LoginTiBtn() {
      this.loginshow = true
      this.Aegshow = false
    },
    AegTiBtn() {
      this.Aegshow = true
      this.loginshow = false
    },
    CodeBox() {
      var codeflag

      var codeText = document.getElementsByClassName('Code_Box')[0] //储存验证码的盒子
      //验证码可以有哪些数
      //
      var codeArr = '23456789qwertyupasdfghjklzxcvbnmQWERTYUPASDFGHJKLZXCVBNM' //这些数随机选择

      // 声明一个盒子装验证码
      //
      var codebox = ''
      // 盒子装四位的验证码,随机选择
      //
      for (var i = 0; i < 4; i++) {
        codebox += codeArr[parseInt(Math.random() * codeArr.length)]
      }
      //之后打印在出验证码的框上
      //
      codeText.innerHTML = codebox
      codeText.style.color =
        'rgb(' +
        parseInt(Math.random() * 255) +
        ',' +
        parseInt(Math.random() * 255) +
        ',' +
        parseInt(Math.random() * 255) +
        ')'
      codeText.style.fontSize = parseInt(Math.random() * 10 + 10) + 'px' //颜色和字号随机

      codeflag = 1 //出现验证码后，将状态标1
    },
    
  },
  components:{
    Popup
  }
  
}
</script>

<style scoped>
.active {
  color: red;
}
.active2 {
  color: red;
}
.login-form {
  width: 380px;
  height: 408px;
  /* border:1px solid blue; */
  /* background-color: red; */
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 147, 255, 0.2);
}
.Fraud_tis {
  width: 348px;
  height: 22px;
  float: left;
  margin-top: 10px;
}
.small_icom {
  margin-left: 15px;
  float: left;
}
.small_tis_p {
  float: left;
  margin-left: 5px;
}
/* 标题框 */
.title_div {
  width: 350px;
  height: 54px;
  float: left;
  color: #666;
}
/* 登录标题 */
.login-title {
  width: 173px;
  height: 54px;
  text-align: center;
  float: left;
  line-height: 54px;
  color: #666;
}
.login-title a {
  color: #666;
}
/* 注册标题 */
.Aeg-title {
  width: 175px;
  height: 54px;
  text-align: center;
  float: left;
  line-height: 54px;
}
.Aeg-title a {
  color: #666;
}
/* 中间空白提示层 */
.msg-wrap {
  width: 309px;
  height: 30px;
  min-height: 23px;
  margin-top: 5px;
  margin-bottom: 5px;
  height: auto !important;
  float: left;
  margin-top: 8px;
  border: 1px solid blue;
  color: #e4393c;
  border: 1px solid #faccc6;
  background: #ffebeb;
  margin-left: 36px;
}
/* 提示图标 */
.tis_icom {
  width: 19px;
  height: 18px;
  float: left;
  background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
  background-position: -104px -49px;
  background-repeat: no-repeat;
  margin-left: 9px;
  margin-top: 4px;
}
/* 提示文字 */
.tis_icom p {
  float: left;
  font-size: 14px;
}
/* 登录账号大的DIV */
.login_input_div {
  width: 310px;
  height: 40px;
  border: 1px solid #bdbdbd;
  float: left;
  margin-left: 36px;
}
/* 人头图标 */
.icom_div {
  width: 40px;
  height: 39px;
  border-color: #e4393c;
  background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
  background-position: 0px -48px;
  float: left;
  border: 1px solid #bdbdbd;
  font-weight: 100;
}
/* 登录账号输入框 */
.login_acc_input {
  width: 268px;
  height: 39px;
  float: left;
}
/* 登录密码输入框的大DIV */
.login_input_div2 {
  width: 310px;
  height: 40px;
  border: 1px solid #bdbdbd;
  float: left;
  margin-left: 36px;
  margin-top: 15px;
}
/* 锁图标 */
.icom_div2 {
  width: 40px;
  height: 39px;
  border-color: #e4393c;
  background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
  background-position: -47px -49px;
  float: left;
  border: 1px solid #bdbdbd;
  font-weight: 100;
}
/* 登录密码输入框 */
.login_pwd_input {
  width: 268px;
  height: 39px;
  float: left;
}
/* 登录按钮 */
.loginBtn {
  width: 304px;
  height: 33px;
  border: 1px solid #e85356;
  background: #e4393c;
  letter-spacing: 13px;
  color: #fff;
  margin-left: 40px;
  margin-top: 60px;
}
/* 底部框 */
.foot_div {
  width: 342px;
  height: 45px;
  margin-left: 19px;
  margin-top: 50px;
  float: left;
}
/* QQ图标 */
.QQ_icom {
  width: 20px;
  height: 20px;
  background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/QQ-weixin.png);
  background-repeat: no-repeat;
  margin-left: 19px;
  margin-top: 14px;
  float: left;
}
/* QQ文字 */
.QQ_font {
  margin-left: 1px;
  margin-top: 13px;
  float: left;
}
/* 微信图标 */
.Wx_icom {
  width: 20px;
  height: 20px;
  background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/QQ-weixin.png);
  background-repeat: no-repeat;
  margin-left: 82px;
  margin-top: 12px;
  float: left;
  background-position: -19px 2px;
}
/* 微信文字 */
.Wx_font {
  margin-left: 5px;
  margin-top: 12px;
  float: left;
}
/* 立即注册图标 */
.RegisterNow_icom {
  width: 45px;
  height: 26px;
  background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
  background-repeat: no-repeat;
  margin-left: 34px;
  margin-top: 12px;
  float: left;
  background-position: -86px -72px;
}
/* 立即注册文字 */
.RegisterNow_font {
  margin-left: -3px;
  margin-top: 12px;
  float: left;
}
/* 注册区 */
.Aeg-form {
  width: 380px;
  height: 600px;
  margin: 0 auto;
  box-shadow: 0 4px 15px rgba(0, 147, 255, 0.2);
}
/* 注册账号输入框大的DIV */
.Aeg_input_div {
  width: 310px;
  height: 40px;
  border: 1px solid #bdbdbd;
  float: left;
  margin-left: 36px;
}
/* 注册账号输入框 */
.Aeg_acc_input {
  width: 268px;
  height: 39px;
  float: left;
}
/* 注册密码输入框的大DIV */
.Aeg_input_div2 {
  width: 310px;
  height: 40px;
  border: 1px solid #bdbdbd;
  float: left;
  margin-left: 36px;
  margin-top: 15px;
}
/* 注册密码框 */
.Aeg_pwd_input {
  width: 268px;
  height: 39px;
  float: left;
}
/* 注册确认密码输入框的大DIV */
.Aeg_input_div3 {
  width: 310px;
  height: 40px;
  border: 1px solid #bdbdbd;
  float: left;
  margin-left: 36px;
  margin-top: 15px;
}
/* 注册确认密码输入框 */
.Aeg_pwd_input2 {
  width: 268px;
  height: 39px;
  float: left;
}
/* 注册手机号码输入框的大DIV */
.Aeg_input_div4 {
  width: 310px;
  height: 40px;
  border: 1px solid #bdbdbd;
  float: left;
  margin-left: 36px;
  margin-top: 15px;
}
/* 注册手机号码输入框 */
.Aeg_phone_input {
  width: 268px;
  height: 39px;
  float: left;
}

/* 注册验证码输入框的大DIV  */
.Aeg_input_div5 {
  width: 172px;
  height: 40px;
  border: 1px solid #bdbdbd;
  float: left;
  margin-left: 36px;
  margin-top: 15px;
}
/* 注册验证码输入框 */
.Aeg_Code_input {
  width: 130px;
  height: 39px;
  float: left;
}
.Code_Box {
  width: 133px;
  height: 39px;
  float: left;
  border: 1px solid #bdbdbd;
  margin-left: 5px;
  margin-top: 16px;
  text-align: center;
  line-height: 39px;
}
/* 注册区验证码错误提示 */

/* 中间空白提示层 */
.Aeg-Code-msg-wrap {
  width: 309px;
  height: 30px;
  min-height: 23px;
  margin-top: 5px;
  margin-bottom: 5px;
  height: auto !important;
  float: left;
  margin-top: 8px;
  border: 1px solid blue;
  color: #e4393c;
  border: 1px solid #faccc6;
  background: #ffebeb;
  margin-left: 36px;
}
/* 提示图标 */
.Aeg_Code_tis_icom {
  width: 19px;
  height: 18px;
  float: left;
  background-image: url(https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2018-0827/i/pwd-icons-new.png);
  background-position: -104px -49px;
  background-repeat: no-repeat;
  margin-left: 9px;
  margin-top: 4px;
}
/* 提示文字 */
.Aeg_Code_tis_icom p {
  float: left;
  font-size: 14px;
}
/* 立即登录文字  */
.LoginisterNow_font {
  margin-left: -3px;
  margin-top: 12px;
  float: left;
}
/* 注册按钮 */
.AegBtn {
  width: 304px;
  height: 33px;
  border: 1px solid #e85356;
  background: #e4393c;
  letter-spacing: 13px;
  color: #fff;
  margin-left: 40px;
  margin-top: 15px;
}

/* 验证码插件css代码 */
</style>